<template>
	<view class="content">
		<text @click="back()" class="iconfont iconzuojiantou-copy backPostion" style="font-size: 45rpx;font-weight:bold;color: #7153FF;"></text>
		<view class="header">
			<image src="cloud://cloud1-6gvg8052f9670276.636c-cloud1-6gvg8052f9670276-1305457435/flowHouse/默认首页.png"></image>
		</view>
		<view class="headFlow">
		  <!-- 代码 -->
		  <image class="bg_ware" src="https://moyv.top/wechat/images/bg_wave.gif"></image>
		</view>
		<view class="sectionCard"> 
			<view class="logoImg">
				<image src="../../static/logo.png"></image> 
			</view>
			<view class="slogan">
				<text>漂流一直，故事不止</text>
			</view>
			<view class="sectionList">
				<view class="sectionItem"> 
					<view class="sectionIteamImg" @click="feedback">
						<view class="sectionIteamText">您的留言</view>
						<image src="../../static/反馈选项1.png"></image>
					</view>
				</view>
				<view class="sectionItem">
					<view class="sectionIteamImg" > 
						<view class="buttonSection">
							<button open-type='feedback' class="feedback">问题反馈</button>
							</view>
						<image src="../../static/反馈选项1.png"></image>
					</view>
				</view>
				<view class="sectionItem" @click="toGongzhong">
					<view class="sectionIteamImg">
						<view class="sectionIteamText" style="width:150rpx ;">公众号</view>
						<image src="../../static/反馈选项1.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view :hidden="userFeedbackHidden" class="popup_content">
						<view class="popup_title">您的留言</view>
						<view class="popup_textarea_item">
							<textarea class="popup_textarea" placeholder='您的留言是我们最好的礼物~' v-model="inputValue">
							</textarea>
							<view @click="submitFeedback()">
								<button class="popup_button">留言</button>
							</view>
						</view>
					</view>
					<view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userFeedbackHidden: true,
				inputValue: ''
			}
		},
		methods: {
			toGongzhong() {
				wx.navigateTo({
					url: '../link/link'
				})
			}, 
			inputIntro() {
				this.inputTitle = '个人简介'
				this.userFeedbackHidden = false;
				this.inputTip = '介绍一下自己吧~'
			},
			showDiv() { // 显示输入弹出框
								 				this.userFeedbackHidden = false;
								 			},
								 			hideDiv() { // 隐藏输入弹出框
								 				this.userFeedbackHidden = true;
								 			},
								 			submitFeedback() { // 提交反馈
			
			                   var _this =this;
								 				  
													   
												   
												   this.userFeedbackHidden = true
												   wx.showToast({
												   	title: '留言成功'
												   })
												   this.inputValue = ''
								 			},
											feedback() {
												this.userFeedbackHidden = false
											},
											back () {
												   wx.navigateBack({//返回
												      delta: 1
												    })
											}
		}
	}
</script>

<style>
	.content{
		width: 100%;
		height: 100%;
		background-color: #F3F1FE;
	}
	
	.headFlow {
		width: 100%;	  
		position: relative;
		/* height:500rpx; */
		/* /* background: linear-gradient(to bottom,  #4F38A4, #9B3EEF); */ 
		/* height: 20px; */
		/* z-index: -10; */
	}
	.bg_ware {
	  position: absolute;
	  left: 0;
	  bottom: -2rpx;
	  width: 100%;
	  mix-blend-mode: screen;
	  height: 120rpx;
	}
	.font3 {
		font-size: 40rpx;
	}
	.header image{
		width: 100%;
		z-index: 100;
	}
	.sectionCard {
		width: 92%;
		height: 800rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: white;
		/* width: 100%; */
		margin: 20rpx;
		padding: 10rpx;
		margin-bottom: 60rpx;
		margin-top: 0px;
	}
	.sectionList {
		display: flex;
		margin-top: 100rpx;
	}
	.logoImg image {
		width: 100rpx;
		height: 100rpx;
		margin-top: 100rpx;
	}
	.slogan {
		margin-top: 30rpx;
		color: #3b2b79;
	}
	.sectionItem {
		position: relative;
		margin-left: 20rpx;
	}
	.sectionIteamImg image {
		width: 200rpx;
		height: 200rpx;
	}
	.sectionIteamText {
		position: absolute;
		top: 20rpx;
		left: 50%;
		top: 50%;
		transform: translate(-30%, -50%);
		color: #3b2b79;
		font-size: 35rpx;
		font-weight: bold;
	}
	.buttonSection{
		width: 150rpx; 
		position: absolute;
		top: 20rpx;
		left: 38%; 
		top: 50%;
		transform: translate(-30%, -50%);
	}
	.popup_overlay {
	 
			position: fixed;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index: 1001;
			-moz-opacity: 0.8;
			opacity: .80;
			filter: alpha(opacity=88);
		}
	 
		.popup_content {
			position: fixed;
			top: 50%;
			left: 50%;
			width: 520upx;
			height: 550upx;
			margin-left: -270upx;
			margin-top: -270upx;
			border: 10px solid white;
			background-color: white;
			z-index: 1002;
			overflow: auto;
			border-radius: 20upx;
		}
	 
		.popup_title {
			padding-top: 20upx;
			width: 480upx;
			text-align: center;
			font-size: 32upx;
			color: #a6bced;
			margin-left: 30rpx;
		}
	 
		.popup_textarea_item {
			padding-top: 5upx;
			height: 240upx;
			width: 440upx;
			background-color: #ffffff;
			margin-top: 30upx;
			margin-left: 20upx;
			align-items: center;
			justify-content: center;
		}
	 
		.popup_textarea {
			width: 410upx;
			font-size: 26upx;
			margin-left: 20upx;
		}
	 
		.popup_button {
			margin-left: 30rpx;
			color: white;
			background-color: #7153FF;
			border-radius: 20upx;
		}
		.backPostion {
			left: 30rpx;
			top: 50rpx;
			position: absolute;
		}
		.feedback {
			margin: 0;
			  padding: 0; 
			  background-color: transparent;
			  width: 100%;
			  height: 100%;
			  display: flex;
			  justify-content: start;
			  align-items: center;
			  color: #666666;
			  font-size: 32rpx;
			  font-weight: normal;
			  flex-grow: 1;
			  color: #3b2b79;
			  font-size: 35rpx;
			  font-weight: bold;
		}
		.feedback::after {
		  border: none;
		}
		.backPostion {
			left: 30rpx;
			top: 50rpx;
			position: absolute;
		}
</style>
